<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>局部腐蚀监测</title>
    <script src="{{url_for('static',filename='js/jquery-3.6.1.js')}}" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <img src="{{url_for('static',filename='img/sign3.png')}}" />
    <!--<div class="title">
        局部腐蚀监测
    </div>-->
    <script>

                $(function () {
                    var int = setInterval(function () {  //设置定时器

                       $.ajax(
                           {
                               url:"/corrosion/connectstatusdata", //从setData函数中获取数据
                               type:"get",
                               dateType:'json',
                                success:function(ret){
                                    var newData = JSON.stringify(ret);
                                    newData = eval("("+newData+")");
                                    ////var com1=newData.com1;
                                    //$("input[name='a']").val(com1);
                                    ////var divMain = document.getElementById("a1");
                                    ////divMain.setAttribute("style","background-color:"+com1);
                                    var com
                                    for (com in newData){
                                        var divMain=document.getElementById(com);
                                        console.log(newData[com])
                                        divMain.setAttribute("style","background-color:"+newData[com]);
                                    }
                                    //console.log(com1)
                                    //window.alter(ret)
                                }

                           }
                       )
                    },10000)
                })
    </script>
    <div>
        <p class="p2">通讯状态:</p>
        <div class="border">
            <div class="div1">
                <input type="button" style={{com1}} id="com1" value="CM1" class="btn1" onclick="">
                <input type="button" style={{com2}} id="com2" value="CM2" class="btn1" onclick="">
                <input type="button" style={{com3}} id="com3" value="CM3" class="btn1" onclick="">
                <input type="button" style={{com4}} id="com4" value="CM4" class="btn1" onclick="">
                <input type="button" style={{com5}} id="com5" value="CM5" class="btn1" onclick="">
                <input type="button" style={{com6}} id="com6" value="CM6" class="btn1" onclick="">
                <input type="button" style={{com7}} id="com7" value="CM7" class="btn1" onclick="">
                <input type="button" style={{com8}} id="com8" value="CM8" class="btn1" onclick="">
                <input type="button" style={{com9}} id="com9" value="CM9" class="btn1" onclick="">
                <input type="button" style={{com10}} id="com10" value="CM10" class="btn1" onclick="">
                <input type="button" style={{com11}} id="com11" value="CM11" class="btn1" onclick="">
                <input type="button" style={{com12}} id="com12" value="CM12" class="btn1" onclick="">
                <input type="button" style={{com13}} id="com13" value="CM13" class="btn1" onclick="">
                <input type="button" style={{com14}} id="com14" value="CM14" class="btn1" onclick="">
                <input type="button" style={{com15}} id="com15" value="CM15" class="btn1" onclick="">
                <input type="button" style={{com16}} id="com16" value="CM16" class="btn1" onclick="">

            </div>
            <div class="div2">
                <input type="button" style={{com17}} id="com17" value="CM17" class="btn1" onclick="">
                <input type="button" style={{com18}} id="com18" value="CM18" class="btn1" onclick="">
                <input type="button" style={{com19}} id="com19" value="CM19" class="btn1" onclick="">
                <input type="button" style={{com20}} id="com20" value="CM20" class="btn1" onclick="">
                <input type="button" style={{com21}} id="com21" value="CM21" class="btn1" onclick="">
                <input type="button" style={{com22}} id="com22" value="CM22" class="btn1" onclick="">
                <input type="button" style={{com23}} id="com23" value="CM23" class="btn1" onclick="">
                <input type="button" style={{com24}} id="com24" value="CM24" class="btn1" onclick="">
                <input type="button" style={{com25}} id="com25" value="CM25" class="btn1" onclick="">
                <input type="button" style={{com26}} id="com26" value="CM26" class="btn1" onclick="">
                <input type="button" style={{com27}} id="com27" value="CM27" class="btn1" onclick="">
                <input type="button" style={{com28}} id="com28" value="CM28" class="btn1" onclick="">
                <input type="button" style={{com29}} id="com29" value="CM29" class="btn1" onclick="">
                <input type="button" style={{com30}} id="com30" value="CM30" class="btn1" onclick="">
                <input type="button" style={{com31}} id="com31" value="CM31" class="btn1" onclick="">
                <input type="button" style={{com32}} id="com32" value="CM32" class="btn1" onclick="">
            </div>
            <!--<input type="button" value="导入历史数据" class="button">-->
            <div class="div3">
                <input type="button" value="腐蚀速率" class="btn2" onclick="window.location.href='{{url_for('speed')}}'">
                <input type="button" value="腐蚀深度" class="btn2" onclick="window.location.href='{{url_for('deep')}}'">
                <!--<input type="button" value="腐蚀因子" class="btn2" onclick="window.location.href='{{url_for('protect')}}'">-->
                <input type="button" value="阴极保护" class="btn2" onclick="window.location.href='{{url_for('protect')}}'">
                <input type="button" value="检测数据" class="btn2" onclick="window.location.href='{{url_for('protect')}}'">
            </div>
        </div>
    </div>

    <div class="back1">
        宁波科金工业腐蚀监测技术有限公司
    </div>
    <div class="back2">
        Ningbo Kejin Industry Corrosion Monitoring Technology Ltd.
    </div>


</body>
<style>
    .title {
        line-height: 150px;
        text-align: center;
        font-size: 55px;
    }
    
    .p2 {
        font-size: 35px;
        position: relative;
        left: 450px;
    }
    
    .border {
        border-width: 3px;
        border-style: solid;
        height: 150px;
        width: 900px;
        margin: auto;
    }
    
    .btn1 {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: none;
        background: none;
    }
    
    .btn2 {
        height: 50px;
        width: 100px;
        border-radius: 50%;
        margin-left: 100px;
        font-size: 20px
    }
    
    .div1 {
        margin-top: 10px
    }
    
    .div2 {
        margin-top: 10px
    }
    
    .div3 {
        margin-top: 40px;
    }
    
    .button {
        font-size: 40px;
        height: 60px;
        display: block;
        margin: 0 auto;
        margin-top: 60px;
    }
    
    .back1 {
        position: relative;
        top: 250px;
        font-size: 25px;
        text-align: center;
    }
    
    .back2 {
        top: 255px;
        position: relative;
        font-size: 25px;
        text-align: center;
    }
</style>

</html>